.article-content p {
    margin-top: 0;
}
/*******************************************************************************
 * Links
 */
.article-content a {
    @include owid-link-90;
}

.article-content .ref {
    color: $vermillion;
    text-decoration: none;
}

/*******************************************************************************
 * Figures, images
 */

.article-content img {
    @include image-shadow;
}

.article-content figure {
    @include figure-margin;
}

.article-content figure[data-grapher-src],
.article-content figure.grapher-component {
    @include figure-grapher-reset;

    > a {
        border-bottom: none !important;
    }

    > a > div:hover {
        -webkit-box-shadow: 0px 0px 4px #000;
        -moz-box-shadow: 0px 0px 4px #000;
        box-shadow: 0px 0px 4px #000;
    }

    &.grapherPreview img {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: $content-max-width;
    }
}

.article-content figure[data-grapher-src].grapherPreview,
.article-content figure.grapher-component.grapherPreview {
    padding: 1em 0;
}

.article-content figure[data-grapher-src]:not(.grapherPreview),
.article-content figure.grapher-component:not(.grapherPreview) {
    height: $grapher-height;
}

figure[data-explorer-src] {
    position: relative;
}

/*******************************************************************************
 * Tables
 */

.article-content .tableContainer {
    margin: 1em 0;
    overflow-x: auto;
}

.article-content .tableContainer > table:not(.plain) {
    border-collapse: collapse;
    border-spacing: 0;
    color: #000;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 100%;
    @include block-shadow;

    > tbody {
        border-bottom: 1px solid #ddd;
    }

    td,
    th {
        text-align: center;
        border: 1px solid #aaa;
        padding: 0.4rem;
    }

    th {
        font-weight: 700;
        padding: 0.5rem 0.4rem;
    }
}

/* Fix for title on really small screens */
@media (max-width: 400px) {
    .logo {
        max-width: calc(100% - 100px);
        font-size: 20px;
    }
}

/*******************************************************************************
 * Columns
 */
.page .wp-block-columns {
    @include grid(12);

    // default is first column is full-width, second column should be empty
    .wp-block-column {
        grid-column: 1 / 13;
        // necessary for Grapher resizing in all column-types
        width: 100%;
    }

    @include md-up {
        &.is-style-sticky-right {
            .wp-block-column:nth-child(1) {
                grid-column: 1 / 6;
            }
            .wp-block-column:nth-child(2) {
                grid-column: 6 / 13;
            }
            .wp-block-column .wp-sticky-container {
                @include sticky-child;
            }
        }

        &.is-style-sticky-left {
            .wp-block-column:nth-child(1) {
                grid-column: 1 / 8;
            }
            .wp-block-column:nth-child(2) {
                grid-column: 8 / 13;
            }
            .wp-block-column .wp-sticky-container {
                @include sticky-child;
            }
        }

        &.is-style-side-by-side {
            .wp-block-column:nth-child(1) {
                grid-column: 1 / 7;
            }
            .wp-block-column:nth-child(2) {
                grid-column: 7 / 13;
            }
        }
    }
}

/*******************************************************************************
 * Notices
 */

.article-content {
    /* Notice for entries that are only a preliminary collection of relevant material */
    .pcrm {
        @include info;
        margin-top: 1rem;
        margin-bottom: 2rem;
        padding: $padding-x-sm;
        background-color: $amber;
        h3 {
            span {
                @include hide;
            }
            margin: 0 0 0.5rem;
            font-size: inherit;
            text-transform: uppercase;
        }
    }

    /* Used for in-page notices (e.g. /coronavirus) */
    .notice {
        @include info;
        margin-top: 1rem;
        margin-bottom: 2rem;
        padding: $padding-x-sm;
        background-color: $amber;
        .title {
            font-weight: bold;
            margin: 0 0 0.5rem;
            font-size: inherit;
            text-transform: uppercase;
        }
    }
}

.article-content {
    span.add-country {
        font-size: 0.9rem;
        font: 400 13px/16px $sans-serif-font-stack;
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        border: 1px solid $gray-20;
        border-radius: 4px;
        padding: 5px 7px;
        color: $gray-80;
        white-space: nowrap;
        margin: -5px 0px -5px -2px;

        .icon {
            width: 0.75rem;
            height: 0.75rem;
            margin-right: 5px;
        }
    }
}

/*******************************************************************************
 * Code blocks
 */

code {
    white-space: pre-wrap; // make sure long code lines do not overflow
}

/*******************************************************************************
 * Grid margin collapse quickfixes
 * We should probably consider solving this another way but for now we
 * fix the most common cases with these quickfixes.
 */

.grid .article-block__text + .h2-bold,
.grid .article-block__list + .h2-bold,
.grid .article-block__text + .h3-bold,
.grid .article-block__list + .h3-bold {
    // take the default margin-top of h2/3 and subtract the default margin of the p element above
    margin-top: calc(48px - 16px);
}

// Images directly under headings have enough space with just the
// margin-bottom of the heading.
.grid .h2-bold + .article-block__image,
.grid .h3-bold + .article-block__image {
    margin-top: 0px;
}
